<template>
  <div>
    <el-tree :data="treeData1"
             show-checkbox
             default-expand-all
             node-key="id"
             ref="tree"
             highlight-current
             :props="defaultProps"
             :check-strictly="false"
             :expand-on-click-node="false"
             :check-on-click-node="false"
             >
      <div slot-scope="{ node, data }" :class="{'eltree-node-ellipsis':true,'no-checked': data.type == '2'}"  style="width: 100%">
          <span> {{ data.name }} （{{ data.code }}）</span>
      </div>
    </el-tree>

    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>

    <div class="test">
      <p>1111</p>
      <span>2222</span>
      <p>333</p>
      <p>4444</p>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData1: [{
        "id": "1690551371155525634",
        "createUser": "1689956207619551234",
        "createDept": "1665902564934033410",
        "createTime": "2023-08-13 10:30:30",
        "updateUser": "1689956207619551234",
        "updateTime": "2023-08-13 10:30:30",
        "status": 1,
        "isDeleted": 0,
        "projectId": "1690551316231114754",
        "projectCode": "T00000001",
        "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
        "code": "T00000001",
        "name": "中国石油-吉林石化-转型升级项目-测试项目1",
        "responsibilityId": "1665902564934033410",
        "responsibilityName": "",
        "type": 0,
        "wfDetail": "",
        "remarks": "",
        "isEnable": 1,
        "processNo": "",
        "projectDivideApproverStatus": "",
        "processNoChange": "",
        "projectDivideChangeApproverStatus": "",
        "parentId": 0,
        "parentName": "",
        "fullPath": "1690551371155525634",
        "pobsId": "",
        "qualitySupervisionId": "",
        "projectManagementUnit": "",
        "supervisionId": "",
        "deviseId": "",
        "epcId": "",
        "consultingUnit": "",
        "surveyUnit": "",
        "constructionId": "",
        "testingId": "",
        "supervisionUnit": "",
        "deviseUnit": "",
        "constructionUnit": "",
        "testingUnit": "",
        "epcUnit": "",
        "children": [{
          "id": "1690552892484112386",
          "createUser": "1690317768414793730",
          "createDept": "1665902564934033410",
          "createTime": "2023-08-13 10:36:33",
          "updateUser": "1672860091587043329",
          "updateTime": "2023-08-13 16:52:44",
          "status": 1,
          "isDeleted": 0,
          "projectId": "1690551316231114754",
          "projectCode": "T00000001",
          "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
          "code": "T000000012",
          "name": "附属装置",
          "responsibilityId": "",
          "responsibilityName": "",
          "type": 1,
          "wfDetail": "",
          "remarks": "",
          "isEnable": 1,
          "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
          "projectDivideApproverStatus": "3",
          "processNoChange": "",
          "projectDivideChangeApproverStatus": "",
          "parentId": "1690551371155525634",
          "parentName": "中国石油-吉林石化-转型升级项目-测试项目1",
          "fullPath": "1690551371155525634,1690552892484112386",
          "pobsId": "",
          "qualitySupervisionId": "",
          "projectManagementUnit": "",
          "supervisionId": "",
          "deviseId": "",
          "epcId": "",
          "consultingUnit": "",
          "surveyUnit": "",
          "constructionId": "",
          "testingId": "",
          "supervisionUnit": "",
          "deviseUnit": "",
          "constructionUnit": "",
          "testingUnit": "",
          "epcUnit": "",
          "children": [{
            "id": "1690628109634002946",
            "createUser": "1690617587289653249",
            "createDept": "-1",
            "createTime": "2023-08-13 15:35:26",
            "updateUser": "1672860091587043329",
            "updateTime": "2023-08-13 16:52:44",
            "status": 1,
            "isDeleted": 0,
            "projectId": "1690551316231114754",
            "projectCode": "T00000001",
            "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "code": "T0000000121",
            "name": "管线",
            "responsibilityId": "",
            "responsibilityName": "",
            "type": 2,
            "wfDetail": "",
            "remarks": "",
            "isEnable": 1,
            "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
            "projectDivideApproverStatus": "3",
            "processNoChange": "",
            "projectDivideChangeApproverStatus": "",
            "parentId": "1690552892484112386",
            "parentName": "附属装置",
            "fullPath": "1690551371155525634,1690552892484112386,1690628109634002946",
            "pobsId": "",
            "qualitySupervisionId": "",
            "projectManagementUnit": "",
            "supervisionId": "",
            "deviseId": "",
            "epcId": "",
            "consultingUnit": "",
            "surveyUnit": "",
            "constructionId": "",
            "testingId": "",
            "supervisionUnit": "",
            "deviseUnit": "",
            "constructionUnit": "",
            "testingUnit": "",
            "epcUnit": "",
            "hasChildren": false,
            "isClick": false,
            "isInDM": false
          },
            {
              "id": "1690628183743160321",
              "createUser": "1690617587289653249",
              "createDept": "-1",
              "createTime": "2023-08-13 15:35:44",
              "updateUser": "1672860091587043329",
              "updateTime": "2023-08-13 16:52:44",
              "status": 1,
              "isDeleted": 0,
              "projectId": "1690551316231114754",
              "projectCode": "T00000001",
              "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
              "code": "T0000000122",
              "name": "仓库",
              "responsibilityId": "",
              "responsibilityName": "",
              "type": 2,
              "wfDetail": "",
              "remarks": "",
              "isEnable": 1,
              "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
              "projectDivideApproverStatus": "3",
              "processNoChange": "",
              "projectDivideChangeApproverStatus": "",
              "parentId": "1690552892484112386",
              "parentName": "附属装置",
              "fullPath": "1690551371155525634,1690552892484112386,1690628183743160321",
              "pobsId": "",
              "qualitySupervisionId": "",
              "projectManagementUnit": "",
              "supervisionId": "",
              "deviseId": "",
              "epcId": "",
              "consultingUnit": "",
              "surveyUnit": "",
              "constructionId": "",
              "testingId": "",
              "supervisionUnit": "",
              "deviseUnit": "",
              "constructionUnit": "",
              "testingUnit": "",
              "epcUnit": "",
              "hasChildren": false,
              "isClick": false,
              "isInDM": false
            }
          ],
          "hasChildren": false,
          "isClick": false,
          "isInDM": false
        },
          {
            "id": "1690961588038615041",
            "createUser": "1690317768414793730",
            "createDept": "1665902564934033410",
            "createTime": "2023-08-14 13:40:34",
            "updateUser": "1672860091587043329",
            "updateTime": "2023-08-14 14:44:50",
            "status": 1,
            "isDeleted": 0,
            "projectId": "1690551316231114754",
            "projectCode": "T00000001",
            "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "code": "T000000013",
            "name": "装置-1",
            "responsibilityId": "",
            "responsibilityName": "",
            "type": 1,
            "wfDetail": "",
            "remarks": "",
            "isEnable": 1,
            "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
            "projectDivideApproverStatus": "3",
            "processNoChange": "",
            "projectDivideChangeApproverStatus": "",
            "parentId": "1690551371155525634",
            "parentName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "fullPath": "1690551371155525634,1690961588038615041",
            "pobsId": "",
            "qualitySupervisionId": "",
            "projectManagementUnit": "",
            "supervisionId": "",
            "deviseId": "",
            "epcId": "",
            "consultingUnit": "",
            "surveyUnit": "",
            "constructionId": "",
            "testingId": "",
            "supervisionUnit": "",
            "deviseUnit": "",
            "constructionUnit": "",
            "testingUnit": "",
            "epcUnit": "",
            "children": [{
              "id": "1690977276203581441",
              "createUser": "1690965251487268865",
              "createDept": "1690964560056254465",
              "createTime": "2023-08-14 14:42:54",
              "updateUser": "1672860091587043329",
              "updateTime": "2023-08-14 14:44:50",
              "status": 1,
              "isDeleted": 0,
              "projectId": "1690551316231114754",
              "projectCode": "T00000001",
              "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
              "code": "T0000000131",
              "name": "管线",
              "responsibilityId": "",
              "responsibilityName": "",
              "type": 2,
              "wfDetail": "",
              "remarks": "",
              "isEnable": 1,
              "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
              "projectDivideApproverStatus": "3",
              "processNoChange": "",
              "projectDivideChangeApproverStatus": "",
              "parentId": "1690961588038615041",
              "parentName": "装置-1",
              "fullPath": "1690551371155525634,1690961588038615041,1690977276203581441",
              "pobsId": "",
              "qualitySupervisionId": "",
              "projectManagementUnit": "",
              "supervisionId": "",
              "deviseId": "",
              "epcId": "",
              "consultingUnit": "",
              "surveyUnit": "",
              "constructionId": "",
              "testingId": "",
              "supervisionUnit": "",
              "deviseUnit": "",
              "constructionUnit": "",
              "testingUnit": "",
              "epcUnit": "",
              "hasChildren": false,
              "isClick": false,
              "isInDM": false
            }],
            "hasChildren": false,
            "isClick": false,
          },
          {
            "id": "1690961588038615042",
            "createUser": "1690317768414793730",
            "createDept": "1665902564934033410",
            "createTime": "2023-08-14 13:40:34",
            "updateUser": "1672860091587043329",
            "updateTime": "2023-08-14 14:44:50",
            "status": 1,
            "isDeleted": 0,
            "projectId": "1690551316231114754",
            "projectCode": "T00000001",
            "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "code": "T000000013",
            "name": "装置-3",
            "responsibilityId": "",
            "responsibilityName": "",
            "type": 1,
            "wfDetail": "",
            "remarks": "",
            "isEnable": 1,
            "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
            "projectDivideApproverStatus": "3",
            "processNoChange": "",
            "projectDivideChangeApproverStatus": "",
            "parentId": "1690551371155525634",
            "parentName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "fullPath": "1690551371155525634,1690961588038615041",
            "pobsId": "",
            "qualitySupervisionId": "",
            "projectManagementUnit": "",
            "supervisionId": "",
            "deviseId": "",
            "epcId": "",
            "consultingUnit": "",
            "surveyUnit": "",
            "constructionId": "",
            "testingId": "",
            "supervisionUnit": "",
            "deviseUnit": "",
            "constructionUnit": "",
            "testingUnit": "",
            "epcUnit": "",
            "children": [{
              "id": "1690977276203581441",
              "createUser": "1690965251487268865",
              "createDept": "1690964560056254465",
              "createTime": "2023-08-14 14:42:54",
              "updateUser": "1672860091587043329",
              "updateTime": "2023-08-14 14:44:50",
              "status": 1,
              "isDeleted": 0,
              "projectId": "1690551316231114754",
              "projectCode": "T00000001",
              "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
              "code": "T0000000131",
              "name": "管线",
              "responsibilityId": "",
              "responsibilityName": "",
              "type": 2,
              "wfDetail": "",
              "remarks": "",
              "isEnable": 1,
              "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
              "projectDivideApproverStatus": "3",
              "processNoChange": "",
              "projectDivideChangeApproverStatus": "",
              "parentId": "1690961588038615041",
              "parentName": "装置-1",
              "fullPath": "1690551371155525634,1690961588038615041,1690977276203581441",
              "pobsId": "",
              "qualitySupervisionId": "",
              "projectManagementUnit": "",
              "supervisionId": "",
              "deviseId": "",
              "epcId": "",
              "consultingUnit": "",
              "surveyUnit": "",
              "constructionId": "",
              "testingId": "",
              "supervisionUnit": "",
              "deviseUnit": "",
              "constructionUnit": "",
              "testingUnit": "",
              "epcUnit": "",
              "hasChildren": false,
              "isClick": false,
              "isInDM": false
            }],
            "hasChildren": false,
            "isClick": false,
          }
        ],
        "hasChildren": false,
        "isClick": false,
        "isInDM": false
      }],
      defaultProps:{
        // disabled: function(data, node) {
        //   if (data.type == 2) {
        //     return true
        //   }
        // }
      }
    };
  },
  mounted(){
    let nodes =document.getElementsByClassName("no-checked");
    console.log("nodes:",nodes)
    for (let i = 0 ; i < nodes.length ; i++){
      console.log( "nodes[i].previousElementSibling:",nodes[i].previousElementSibling)
      nodes[i].previousElementSibling.style.display = 'none'
    }
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleCheckChange(nodeData, ifCheck, ifHasCheckChild){
      console.log("**********",nodeData, ifCheck, ifHasCheckChild)
      debugger
      if (!ifCheck) {//去掉时连带把子节点都去掉，不关联父节点
        if (nodeData.children && nodeData.children.length) {
          nodeData.children.forEach(childNode => {
            //console.log("childNode",childNode)
            this.$refs['tree'].setChecked(childNode, ifCheck, true)
          })
        }
      } else {//选中的时候，如果父节点没有选中，递归选中
        if (nodeData.parentId != 0) {
          let parentNode = this.$refs['tree'].getNode(nodeData.id)
          console.log("parentNode",parentNode)
          if (!parentNode.checked) {
            this.$refs['tree'].setChecked(parentNode, true, true)
          }
        }
      }
    },
    /**
     * 如果当前节点状态为选中，递归去掉所有子节点选中状态
     * 如果为未选中，递归加上所有子节点选中状态
     * @param data
     */
    doCheckChild(nodeData,data,checked){
      debugger

      //获取当前节点
      let curNode = this.$refs.tree.getNode(nodeData.id)
      console.log("curNode:",curNode)
      let doCheck = false
      if (checked == undefined){
        doCheck = curNode.checked  //false 去掉勾选 true 勾选
      }else{
        doCheck = checked ;
      }

      if (nodeData.parentId !== 0 ){//如果当前节点不是根节点
        //向上找
        if (curNode.parent.data.type !== 0){// curNode.parent.data.type == 0 根节点
          this.$refs.tree.setChecked(nodeData.parentId,doCheck,true) //上级节点
          this.doCheckChild(curNode.parent.data,'',doCheck)
        }else{
          this.$refs.tree.setChecked(nodeData.parentId,doCheck,true)
        }
      }else{ //如果当前节点是根节点，只需向下找
        //向下找
        if (curNode.childNodes && curNode.childNodes.length) {
          curNode.childNodes.forEach(childNode => {
            this.$refs.tree.setChecked(childNode.data.id,doCheck,true)
          })
        }
      }

    },
    // doCheckChild(node, todo) {
    //   console.log("node:",node,'todo:',todo)
    //   //debugger
    //   if (todo === undefined) {
    //     todo = !node.checked
    //   }
    //
    //   //this.$refs['treeData'].setChecked(node, todo, true)
    //   //this.$set(node.data, "disabled", true)
    //   this.$set(node, "checked", !node.checked)
    //
    //   if (node.childNodes && node.childNodes.length) {
    //     node.childNodes.forEach(childNode => {
    //       this.$set(childNode,'checked',true)
    //       //this.$set(childNode.data,'disabled',!node.checked)
    //       this.doCheckChild(childNode, todo)
    //     })
    //   }
    // },
    handleNodeClick(data) {
      this.$refs.treeData.getCheckedNodes();
      console.log("treeData:", this.treeData, 'data:', data);
    },
    loadNode(node, resolve) {
      console.log("node:", node)
      let flag = ''
      if (node.checked || node.data.disabled){
        flag = true
      }


      this.level++
      if (node.level === 0) {
        //  this.$refs.treeData.updateKeyChildren(node.data.id, [{id:'3', name: 'region3' }, { id:'21',name: 'region21' }]);
        return resolve([{id: '1', name: 'region1', disabled: flag}, {
          id: '20',
          name: 'region2',
          disabled: flag
        }]);
      }
      if (node.level > 3) return resolve([]);
      var hasChild;
      if (node.data.name === 'region1') {
        hasChild = true;
      } else if (node.data.name === 'region2') {
        hasChild = false;
      } else {
        hasChild = this.level > 5;
      }

      setTimeout(() => {
        var data;
        let num = this.num++
        if (hasChild) {
          data = [{
            id: num,
            name: 'zone' + (this.count++),
            disabled:flag
          }, {
            id: num + 5,
            name: 'zone' + (this.count++),
            disabled:flag

          }];
        } else {
          data = [];
        }
        //console.log("data:", data)
        resolve(data);
        this.maps.set(node.data.id, {node, resolve});
        //console.log("this.maps:", this.maps)
      }, 500);
    }
  }
};
</script>

<style>
.no-checked{padding-left: 20px}
/*.el-tree-node__content:has(.no-checked){*/
/*  .el-checkbox{display: none}*/
/*}*/
.test span~p{color: red}
</style>